import QtQuick 2.12
import QtQuick.Window 2.12


//anchors 锚
//6条锚线：top顶，bottom底，left左，right右，horizontalCenter水平中，verticalCenter垂直中


Window {
    visible: true
    width: 640
    height: 480

    //元素填充他的父元素 RedSquare > DarkSquare
    DarkSquare {
        x:20
        y:20
        id:darksquare1
        RedSquare {
            width: 12
            anchors.fill: parent
            anchors.margins: 8
            Text {
                id: text1
                anchors.centerIn: parent
                text: qsTr("(1)")
            }
        }
    }

    //元素左对齐他的父元素
    DarkSquare {
        x:100
        y:20
        id:darksquare2
        RedSquare {
            width: 48
            anchors.left: parent.left
            anchors.leftMargin: 8
            Text {
                id: text2
                anchors.centerIn:parent
                text: qsTr("(2)")
            }
        }
    }

    //元素的左边与它父元素的右边对齐。
    DarkSquare {
        x:170
        y:20
        id:darksquare3

        RedSquare {
            width: 48
            anchors.left: parent.right
            anchors.leftMargin: 0
            Text {
                id: text3
                anchors.centerIn:parent
                text: qsTr("(3)")
            }
        }
    }

    //元素中间对齐。redsquare1与它的父元素水平中间对齐。redsquare2与redsquare1中间对齐，并且它的顶部对齐Blue1的底部。
    DarkSquare {
        x:20
        y:100
        id:darksquare4

        RedSquare {
            id: redsquare1
            width: 30; height: 12
            y:8
            anchors.horizontalCenter: parent.horizontalCenter
            Text {
                id: text4
                anchors.centerIn:parent
                text: qsTr("(4)")
            }
        }

        RedSquare {
            id: redsquare2
            width: 30; height: 12
            anchors.top: redsquare1.bottom
            anchors.topMargin: 4
            anchors.horizontalCenter: redsquare1.horizontalCenter
            Text {
                id: text5
                anchors.centerIn:parent
                text: qsTr("(5)")
            }
        }
    }

    //元素在它的父元素中居中
    DarkSquare {
        x:100
        y:100
        id:darksquare5

        RedSquare {
            width: 22
            anchors.centerIn: parent
            Text {
                id: text6
                anchors.centerIn:parent
                text: qsTr("(6)")
            }
        }
    }

    //元素水平方向居中对齐父元素并向后偏移12像素，垂直方向居中对齐。

    DarkSquare {
        x:200
        y:100
        id:darksquare6

        RedSquare {
            width: 22
            height: 22
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.horizontalCenterOffset: -12
            anchors.verticalCenter: parent.verticalCenter
            Text {
                id: text7
                anchors.centerIn:parent
                text: qsTr("(7)")
            }
        }
    }
}
